<template>
  <view class="mine-page">
    <view class="header">
      <view class="user-info">
        <image :src="user.avatar || '/static/default-avatar.png'" class="avatar"></image>
        <view class="info">
          <text class="name">{{ user.displayName }}</text>
          <text class="username">@{{ user.username }}</text>
        </view>
      </view>
    </view>
    
    <view class="menu-list">
      <view class="menu-section">
        <view 
          v-for="item in accountMenu" 
          :key="item.id"
          class="menu-item"
          @click="navigateTo(item.path)"
        >
          <text class="menu-icon">{{ item.icon }}</text>
          <text class="menu-label">{{ item.label }}</text>
          <text class="arrow">›</text>
        </view>
      </view>
      
      <view class="menu-section">
        <view 
          v-for="item in settingsMenu" 
          :key="item.id"
          class="menu-item"
          @click="navigateTo(item.path)"
        >
          <text class="menu-icon">{{ item.icon }}</text>
          <text class="menu-label">{{ item.label }}</text>
          <text class="arrow">›</text>
        </view>
      </view>
      
      <view class="menu-section">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const user = ref(uni.getStorageSync('user') || {})

const accountMenu = ref([
  { id: 1, label: '个人信息', icon: '👤', path: '/pages/profile/profile' },
  { id: 2, label: '我的文件', icon: '📁', path: '/pages/files/my-files' },
  { id: 3, label: '我的任务', icon: '✅', path: '/pages/tasks/tasks' }
])

const settingsMenu = ref([
  { id: 4, label: '通知设置', icon: '🔔', path: '/pages/settings/notification' },
  { id: 5, label: '隐私设置', icon: '🔒', path: '/pages/settings/privacy' },
  { id: 6, label: '关于我们', icon: 'ℹ️', path: '/pages/about/about' }
])

const navigateTo = (path: string) => {
  uni.navigateTo({
    url: path,
    fail: () => {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.clearStorageSync()
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
    }
  })
}
</script>

<style scoped>
.mine-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 30rpx;
}

.info {
  flex: 1;
  color: white;
}

.name {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.username {
  font-size: 28rpx;
  opacity: 0.8;
}

.menu-list {
  padding: 30rpx;
}

.menu-section {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: 24rpx;
}

.menu-label {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.arrow {
  font-size: 50rpx;
  color: #ccc;
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  background: white;
  color: #ff3b30;
  border-radius: 20rpx;
  font-size: 32rpx;
  border: none;
}
</style>
